<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>分页 - 光年(Light Year Admin)后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico" />
    <meta
      name="keywords"
      content="LightYear,光年,后台模板,后台管理系统,光年HTML模板"
    />
    <meta
      name="description"
      content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。"
    />
    <meta name="author" content="yinqi" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/materialdesignicons.min.css" rel="stylesheet" />
    <link href="../css/style.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link
      href="https://unpkg.com/layui@2.9.9/dist/css/layui.css"
      rel="stylesheet"
    />

    <style>
      body{background-color: rgb(198, 197, 196);}
    </style>
  </head>

  <body>
    <div class="lyear-layout-web">
      <div class="lyear-layout-container">
        <!--左侧导航-->
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">
          <!-- logo -->
          <div id="logo" class="sidebar-header">
            <a href="../index.html"
              ><img
                src="../images/logo-sidebar.png"
                title="LightYear"
                alt="LightYear"
            /></a>
          </div>
          <div class="lyear-layout-sidebar-scroll">
            <nav class="sidebar-main">
              <ul class="nav nav-drawer">
                
                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 学生管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li>
                      <a href="../lms-admin/student_table.html">学生列表</a>
                    </li>
                    
                  </ul>
                </li>
             

                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 班级管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li>
                      <a href="../lms-teacher/create_clazz.html">创建班级</a>
                    </li>
                    <li>
                      <a href="../lms-admin/clazz_info.html">学习情况</a>
                    </li>
                  </ul>
                </li>


                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 作业管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li><a href="../lms-teacher/create_assignment.html">发布作业</a></li>
                    <li><a href="../lms-teacher/assignment_list.html">作业列表</a></li>
                  </ul>
                </li>
                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 问卷管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li><a href="../lms-teacher/create_questionnaire.html">发布问卷</a></li>
                    <li><a href="../lms-teacher/questionnaire_list.html">问卷列表</a></li>
                  </ul>
                </li>
                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 论坛管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li><a href="../lms-teacher/create_forum.html">发布帖子</a></li>
                    <li><a href="../lms-teacher/forum_list.html">帖子列表</a></li>
                    <li><a href="../lms-teacher/forum_list_self.html">我的帖子</a></li>
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">
          <nav class="navbar navbar-default">
            <div class="topbar">
              <div class="topbar-left">
                <div class="lyear-aside-toggler">
                  <span class="lyear-toggler-bar"></span>
                  <span class="lyear-toggler-bar"></span>
                  <span class="lyear-toggler-bar"></span>
                </div>
                <span class="navbar-page-title"> 后台首页 </span>
              </div>

              <div class="topbar-right">
                <a href="javascript:void(0)" data-toggle="dropdown">
                  <span>笔下光年 <span class="caret"></span></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li>
                    <a href="../lyear_pages_login.html"
                      ><i class="mdi mdi-logout-variant"></i> 退出登录</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </header>
        <!--End 头部信息-->
        //endregion

        <!--页面主要内容-->
        <main class="lyear-layout-content" style="display: flex; flex-wrap: wrap;">
          <div style="flex-basis: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center;">
            <span style="font-weight: bold; font-size: larger;font-size: 30px;">班级信息图表大屏</span>
        </div>

        <div style="flex-basis: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center;">
          <div style="width: 10px; height: 10px; background-color: transparent;"></div>
        </div>
        
            <!-- <div class="chart-container" id="scatterChart"></div> -->
  
            <div class="chart-container"style="flex-basis: 33.33%; flex-grow: 1;">
                <canvas id="learningStyleChart"></canvas>
            </div>

            <div class="personality"style="flex-basis: 33.33%; flex-grow: 1;">
              <span class="action" style="color: red;">行动者：</span>
<span>特征：重视经验、活动、直觉的决策、团队合作、不喜欢行政组织和程序。</span><br>
<span>擅长的活动：头脑风暴、解决问题、小组讨论、拼图、比赛</span><br><br>

<span class="reflective" style="color: blue;">反思者：</span>
<span>特征：专注于了解意义,观察、描述过程和预测结果; 在活动中关注问题的结果而非方法。</span><br>
<span>擅长的活动：讨论、自我分析、观察、反馈、采访</span><br><br>

<span class="theoretical" style="color: rgba(251, 205, 0, 0.486);">理论者：</span>
<span>特征：关注概念、逻辑、归纳、系统化; 不相信直觉、直观，也不让社会及感情融入判断。</span><br>
<span>擅长的活动：示范、统计、故事、应用理论</span><br><br>

<span class="practical" style="color: rgb(94, 252, 2);">实用主义者：</span>
<span>特征：喜欢小组合作、讨论、辩论，善于冒险和应用成果，但不善于反思、观察和深度的理解。</span><br>
<span>擅长的活动：自我反省、案例研究、解决问题、讨论</span><br>

          </div>
  
            <div class="chart-container"style="flex-basis: 33.33%; flex-grow: 1;">
                <canvas id="communicationChart"></canvas>
            </div>
  
            <div class="chart-container" style="flex-basis: 50%; flex-grow: 1;">
                <canvas id="homeworkChart"></canvas>
            </div>
  
            <div class="chart-container" style="flex-basis: 50%; flex-grow: 1;">
                <canvas class="js-chartjs-bars"></canvas>
            </div>
        </main>
        <!--End 页面主要内容-->
      </div>
    </div>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script
      type="text/javascript"
      src="../js/perfect-scrollbar.min.js"
    ></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/Chart.js"></script>
    <script src="https://unpkg.com/layui@2.9.9/dist/layui.js"></script>
    <script type="text/javascript" src="../js/http.js"></script>
    <script>
      // var clazz;
      //       var clazzId;
      //       var table;

      //       var res = httpListClazz({});
      //       if (res.success) {
      //         console.log("数据", res.data);
      //         clazz = res.data.records;
      //       } else {
      //         alert("查询失败！");
      //       }

      //       // 假设我们有一个option数组
      //       const options = [];
      //       for (let i in clazz) {
      //         options.push({ text: clazz[i].cname, value: clazz[i].cid });
      //       }

      //       layui.use(["form", "jquery"], function () {
      //         var form = layui.form;
      //         var $ = layui.jquery;

      //         renderSelectOptions(options); // 渲染下拉框选项
      //         form.render("select"); // 更新渲染

      //         // 监听下拉框选择事件
      //         form.on("select(selectData)", function (data) {
      //           var selectedValue = data.value; // 获取选择的值
      //           console.log("选择的值为：", selectedValue);
      //           clazzId = selectedValue;

      //         });
      //       });

      //       // 渲染下拉框选项
      //       function renderSelectOptions(data) {
      //         var selectElem = $("#selectData");
      //         for (var i = 0; i < data.length; i++) {
      //           var option =
      //             '<option value="' +
      //             data[i].value +
      //             '">' +
      //             data[i].text +
      //             "</option>";
      //           selectElem.append(option);
      //         }
      //       }

      //参与提问次数区间人数
      var data = httpCount({}).data;
      //作业成绩区间人数
      var data4 = httpScoreCount({}).data;

      var datatmp = [];
      var data1tmp1 =0;
      var data1tmp2 =0;
      var data1tmp3 =0;
      var data1tmp4 =0;

      var names = [];
      var postCounts = [];

      var completeCounts = [];

      for(let i in data){
        //data1
        if(data[i].style!=null){
          if(data[i].style==1){
            data1tmp1++;
          }else  if(data[i].style==2){
            data1tmp2++;
          }else  if(data[i].style==3){
            data1tmp3++;
          }else  if(data[i].style==4){
            data1tmp4++;
          }
        }

        //data2
        names.push(data[i].name);
        postCounts.push(data[i].postCount);


        //data3
        completeCounts.push(data[i].completeCount);
      }
      datatmp.push(data1tmp1);
      datatmp.push(data1tmp2);
      datatmp.push(data1tmp3);
      datatmp.push(data1tmp4);

      console.log('names',names)
      console.log('datatmp',datatmp)
      console.log('postCounts',postCounts)
      console.log('completeCounts',completeCounts)





      // 学生学习风格饼状图数据
      var learningStyleData = {
        labels: ["行动者", "反思者", "理论者", "实用主义者"],
        datasets: [
          {
            data: datatmp,
            backgroundColor: ["#ff6384", "#36a2eb", "#ffce56", "#abce26"],
          },
        ],
      };

      // 学生交流次数统计图数据
      var communicationData = {
        labels: names,
        datasets: [
          {
            label: "交流次数",
            data: postCounts,
            backgroundColor: "#ff6384",
          },
        ],
      };

      // 学生完成作业次数统计柱状图数据
      var homeworkData = {
        labels: names,
        datasets: [
          {
            label: "作业次数",
            data: completeCounts,
            backgroundColor: "#36a2eb",
          },
        ],
      };

      // 学生分数人数柱状图数据
      $(document).ready(function (e) {
        var $dashChartBarsCnt = jQuery(".js-chartjs-bars")[0].getContext("2d");

        var $dashChartBarsData = {
          labels: [
            "0~60",
            "60~70",
            "70~80",
            "80~90",
            "90~100",
          ],
          datasets: [
            {
              label: "作业成绩区间人数",
              borderWidth: 1,
              borderColor: "rgba(0,0,0,0)",
              backgroundColor: "rgba(51,202,185,0.5)",
              hoverBackgroundColor: "rgba(51,202,185,0.7)",
              hoverBorderColor: "rgba(0,0,0,0)",
              data: [data4.range60, data4.range70, data4.range80, data4.range90, data4.range100],
            },
          ],
        };
        new Chart($dashChartBarsCnt, {
          type: "bar",
          data: $dashChartBarsData,
        });
      });

      // 创建图表
      var learningStyleChart = new Chart(
        document.getElementById("learningStyleChart"),
        {
          type: "pie",
          data: learningStyleData,
        }
      );

      var communicationChart = new Chart(
        document.getElementById("communicationChart"),
        {
          type: "bar",
          data: communicationData,
        }
      );

      var homeworkChart = new Chart(document.getElementById("homeworkChart"), {
        type: "bar",
        data: homeworkData,
      });
    </script>
  </body>
</html>
